<template>
  <div class="ant-list ant-list-split">
    <ul class="ant-list-items">
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">账户密码</h4>
            <div class="ant-list-item-meta-description">
              当前密码强度：<span class="strong">强</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link @click="pswdFormDialogVisible = true">修改</el-button>
          <el-dialog v-model="pswdFormDialogVisible" title="账户密码" width="600px" append-to-body>
            <div>
              <el-form
                ref="pswdFormRef"
                :model="pswdForm"
                :rules="pswdRules"
                label-position="top"
                label-width="120px"
                status-icon
              >
                <el-form-item label="账号" prop="name">
                  <el-input v-model="pswdForm.name" readonly disabled />
                </el-form-item>
                <el-form-item label="当前密码" prop="password">
                  <el-input v-model="pswdForm.password" placeholder="请输入当前密码" />
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword1">
                  <Password-Input
                    v-model="pswdForm.newpassword1"
                    msg="使用8个及以上的大小写字母、数字和符号(至少包含两种类型)"
                  />
                </el-form-item>
                <el-form-item label="确认密码" prop="newpassword2">
                  <el-input v-model="pswdForm.newpassword2" placeholder="请输入确认密码" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="resetForm(pswdFormRef)">取消</el-button>
                <el-button type="primary" @click="submitPswdForm(pswdFormRef)">确认 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">手机号码</h4>
            <div class="ant-list-item-meta-description">
              已绑定手机：<span class="strong">{{ user.phone }}</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button v-if="user.phone" type="primary" link @click="phoneFormDialogVisible = true"
            >修改</el-button
          >
          <el-button v-else type="primary" link @click="phoneFormDialogVisible = true"
            >绑定</el-button
          >
          <el-dialog v-model="phoneFormDialogVisible" title="手机号码" width="600px">
            <div>
              <el-form
                ref="phoneFormRef"
                :model="phoneForm"
                :rules="phoneRules"
                label-position="top"
                label-width="120px"
                status-icon
              >
                <el-form-item label="当前手机号码" prop="oldPhone">
                  <el-input v-model="phoneForm.oldPhone" readonly disabled />
                </el-form-item>
                <el-form-item label="新手机号码" prop="phone">
                  <el-input v-model="phoneForm.phone" placeholder="请输入新手机号码" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="w-full">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <el-input v-model="phoneForm.code" placeholder="请输入验证码" />
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" class="w-full">发送验证码</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="submitPhoneForm(phoneFormRef)">确认 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">邮箱号码</h4>
            <div class="ant-list-item-meta-description">
              已绑定邮箱号码：<span class="strong">{{ user.email }}</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button v-if="user.email" type="primary" link @click="emailFormDialogVisible = true"
            >修改</el-button
          >
          <el-button v-else type="primary" link @click="emailFormDialogVisible = true"
            >绑定</el-button
          >
          <el-dialog v-model="emailFormDialogVisible" title="邮箱号码" width="600px">
            <div>
              <el-form
                ref="emailFormRef"
                :model="emailForm"
                :rules="emailRules"
                label-position="top"
                label-width="120px"
                status-icon
              >
                <el-form-item label="当前邮箱号码" prop="oldEmail">
                  <el-input v-model="emailForm.oldEmail" readonly disabled />
                </el-form-item>
                <el-form-item label="新邮箱号码" prop="email">
                  <el-input v-model="emailForm.email" placeholder="请输入新邮箱号码" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="w-full">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <el-input v-model="emailForm.code" placeholder="请输入验证码" />
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" class="w-full">发送验证码</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="submitEmailForm(emailFormRef)">确认 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>

      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">密保问题</h4>
            <div class="ant-list-item-meta-description">
              未设置密保问题，密保问题可有效保护账户安全
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link @click="secretFormDialogVisible = true">设置</el-button>
          <el-dialog v-model="secretFormDialogVisible" title="密保问题" width="600px">
            <div>
              <el-form
                ref="secretFormRef"
                :model="secretForm"
                :rules="secretRules"
                label-position="top"
                label-width="120px"
                status-icon
              >
                <el-form-item label="问题一" prop="oneQuestion">
                  <el-select
                    v-model="secretForm.oneQuestion"
                    placeholder="请选择密保问题"
                    class="w-full"
                  >
                    <el-option
                      v-for="item in secretOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="答案一" prop="oneAnswer">
                  <el-input v-model="secretForm.oneAnswer" />
                </el-form-item>
                <el-form-item label="问题二" prop="twoQuestion">
                  <el-select
                    v-model="secretForm.twoQuestion"
                    placeholder="请选择密保问题"
                    class="w-full"
                  >
                    <el-option
                      v-for="item in secretOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="答案二" prop="twoAnswer">
                  <el-input v-model="secretForm.twoAnswer" />
                </el-form-item>
                <el-form-item label="问题三" prop="threeQuestion">
                  <el-select
                    v-model="secretForm.threeQuestion"
                    placeholder="请选择密保问题"
                    class="w-full"
                  >
                    <el-option
                      v-for="item in secretOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="答案三" prop="threeAnswer">
                  <el-input v-model="secretForm.threeAnswer" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="submitSecretForm(secretFormRef)">确认 </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import PasswordInput from '@/components/sofastui/PasswordInput/PasswordInput.vue'
import { AuthStore } from '@/stores/modules/auth'
import rules from '@/utils/rules'

const authStore = AuthStore()

const pswdFormDialogVisible = ref(false)
const phoneFormDialogVisible = ref(false)
const emailFormDialogVisible = ref(false)
const secretFormDialogVisible = ref(false)

const pswdFormRef = ref<FormInstance>()
const phoneFormRef = ref<FormInstance>()
const emailFormRef = ref<FormInstance>()
const secretFormRef = ref<FormInstance>()

const user = reactive({
  ...authStore.user,
})

const pswdForm = reactive({
  name: authStore.user.username,
  password: '',
  newpassword1: '',
  newpassword2: '',
})
const phoneForm = reactive({
  oldPhone: authStore.user.phone,
  phone: '',
  code: '',
})
const emailForm = reactive({
  oldEmail: authStore.user.email,
  email: '',
  code: '',
})
const secretForm = reactive({
  oneQuestion: '',
  oneAnswer: '',
  twoQuestion: '',
  twoAnswer: '',
  threeQuestion: '',
  threeAnswer: '',
})

const pswdRules = reactive<FormRules>({
  password: [rules.required()],
  newpassword1: [rules.required(), rules.pswd()],
  newpassword2: [rules.required(), rules.pswd()],
})
const phoneRules = reactive<FormRules>({
  oldPhone: [rules.required(), rules.mobile()],
  phone: [rules.required(), rules.mobile()],
  code: [rules.required(), rules.verificationCode()],
})
const emailRules = reactive<FormRules>({
  oldEmail: [rules.required(), rules.email()],
  email: [rules.required(), rules.email()],
  code: [rules.required(), rules.verificationCode()],
})
const secretRules = reactive<FormRules>({
  oneQuestion: [rules.required()],
  oneAnswer: [rules.required()],
  twoQuestion: [rules.required()],
  twoAnswer: [rules.required()],
  threeQuestion: [rules.required()],
  threeAnswer: [rules.required()],
})

const secretOptions = [
  {
    value: '1',
    label: '您目前的姓名是？',
  },
  {
    value: '2',
    label: '您配偶的生日是？',
  },
  {
    value: '3',
    label: '您的学号（或工号）是？',
  },
  {
    value: '4',
    label: '您母亲的生日是？',
  },
  {
    value: '5',
    label: '您高中班主任的名字是？',
  },
  {
    value: '6',
    label: '您父亲的姓名是？',
  },
  {
    value: '7',
    label: '您小学班主任的名字是？',
  },
  {
    value: '8',
    label: '您父亲的生日是？',
  },
  {
    value: '9',
    label: '您配偶的姓名是？',
  },
  {
    value: '10',
    label: '您初中班主任的名字是？',
  },
  {
    value: '11',
    label: '您最熟悉的童年好友名字是？',
  },
  {
    value: '12',
    label: '您最熟悉的学校宿舍舍友名字是？',
  },
  {
    value: '13',
    label: '对您影响最大的人名字是？',
  },
]
const saveLoading = ref(false)

// 修改密码
const submitPswdForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(fields)
      // editInfo(fields).then(() => {});
      saveLoading.value = true
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 绑定手机
const submitPhoneForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(fields)
      // editInfo(fields).then(() => {});
      saveLoading.value = true
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 绑定邮箱
const submitEmailForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(fields)
      // editInfo(fields).then(() => {});
      saveLoading.value = true
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 设置密保
const submitSecretForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      console.log(fields)
      // editInfo(fields).then(() => {});
      saveLoading.value = true
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  formEl.resetFields()

  pswdFormDialogVisible.value = false
  phoneFormDialogVisible.value = false
  emailFormDialogVisible.value = false
  secretFormDialogVisible.value = false
}
</script>

<style lang="less" scoped>
.ant-list {
  width: 100%;
}

.ant-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: rgba(0, 0, 0, 0.85);
}

.ant-list-split .ant-list-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* .ant-list-split .ant-list-item:last-child {
  border-bottom: none;
} */

.ant-list-item-meta {
  display: flex;
  flex: 1 1;
  align-items: flex-start;
  max-width: 100%;
}

.ant-list-item-meta-content {
  flex: 1 0;
  width: 0;
  color: rgba(0, 0, 0, 0.85);
}

.ant-list-item-action {
  flex: 0 0 auto;
  margin-left: 48px;
  padding: 0;
  font-size: 0;
  list-style: none;
}

.ant-list-item-meta-title {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5715;
}

.ant-list-item-meta-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5715;
}
</style>
